<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 11rem;
        }

        .login .personal_logo {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-refresh-content">
            <div class="aui-content" style="overflow:hidden">
                <div class="login" style="background-image:url('../../image/my/bgserver.png');">
                    <!-- <img src="../../image/personal_bkg.jpg" alt="" class="loginbg"> -->
                    <div class="userinfo">
                        <div class="userHerder" style="padding-top: 1.2rem;">

                        </div>
                        <div style="padding-top:3rem;width:80vw;margin:0 auto;text-align: center;">
                            <div style="display:flex;align-items: center;justify-content: space-between;">
                                <div style="color:#FFB600;font-size: 0.5rem;">{{dataInfo.start_time}}</div>
                                <div style="color:#FFB600;font-size: 0.5rem;">{{dataInfo.time}}</div>
                            </div>
                            <div style="padding-top:0.4rem;padding-bottom:1rem;width:68vw;margin: 0 auto;position:relative;">
                                <div style="background:#000;height:0.3rem;border-radius:0.2rem;"></div>
                                <div style="background:#FFB600;height:0.3rem;border-radius:0.2rem;width:35vw;position: relative;top: -0.3rem;"></div>
                                <div style="color:#ffb600;font-size:0.5rem;position:absolute;width: 3.5rem;top: -1.2rem;left:27vw;" v-if="dataInfo.status==2">
                                    {{dataInfo.end_time}}
                                    <img src="../../image/my/serverborder.png" alt="" style="width: 3.5rem;position: absolute;top: -0.4rem;">

                                </div>
                            </div>
                            <div style="color:#FFB600;font-size: 0.7rem;">店铺服务费 {{dataInfo.service_charge}} 元 / 年</div>

                            <div>
                                <span v-if="dataInfo.status == 1" style="color:#FFB600">未缴纳</span>
                                <span v-else-if="dataInfo.status == 2" style="color:#FFB600">正常</span>
                                <span v-else-if="dataInfo.status == 3" style="color:#FFB600">已到期</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>



            <div @click="setServiceCost()" style="background:#FFB600;color:#000;width:80vw;margin:0 auto;height:2.2rem;line-height:2.2rem;text-align:center;margin-top:2rem;">立即续费</div>



        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>

<script type="text/javascript">
    function setServiceCost1() {

        api.actionSheet({
            title: '立即续费',
            cancelTitle: '取消',
            // destructiveTitle: '红色警告按钮',
            buttons: ['余额支付', '支付宝', '微信支付']
        }, function(ret, err) {
            if (ret) {
                console.log(JSON.stringify(ret));
            } else {
                alert(JSON.stringify(err));
            }
        });


        // api.openFrame({
        //   name: 'jiaofei',
        //   url: './five_frame_header2.html',
        //   rect: {
        //     x:0,
        //     y:0,
        //     w:'auto',
        //     h:'auto'
        //   },
        //   pageParam: {
        //       type: '立即续费',
        //       name:'ShopServiceCharge_Cost'
        //   }
        // })
    }
    apiready = function() {
        var toast = new auiToast({})
        var dialog = new auiDialog({})

        new Vue({
            el: '#app',
            data: {
                dataInfo: {}
            },
            methods: {
                getDataInfo() {
                    var _this = this;
                    api.ajax({
                        url: window.Url.Freestore_serviceCharge,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage("token")
                            }
                        }
                    }, function(ret, err) {

                        // console.log(JSON.stringify(ret))
                        if (ret.re == 1) {
                            _this.dataInfo = ret.data;
                        } else {
                            toast.loading({
                                title: ret.info,
                                duration: 1000
                            }, function(ret1) {
                                console.log(ret1)
                                setTimeout(function() {
                                    toast.hide();
                                    api.closeWin();
                                }, 1000)

                            });
                        }
                    });

                },
                setServiceCost() {
                    api.actionSheet({
                        title: '立即续费',
                        cancelTitle: '取消',
                        buttons: ['余额支付', '支付宝', '微信支付']
                    }, function(ret, err) {
                        if (ret) {
                            var btnIndex = 0;
                            var pass = '';
                            btnIndex = ret.buttonIndex;
                            if (ret.buttonIndex == 1) {
                                //余额支付
                                dialog.prompt({
                                    title: "余额支付",
                                    text: '支付密码',
                                    buttons: ['取消', '确定']
                                }, function(ret) {
                                    if (ret.buttonIndex == 2) {
                                        pass = ret.text;

                                        api.ajax({
                                            url: window.Url.Freestore_serviceRecharge,
                                            method: 'post',
                                            data: {
                                                values: {
                                                    token: $api.getStorage('token'),
                                                    password: Base64.encode("UNO"+pass+"HACHA"),
                                                    type: 4
                                                }
                                            }
                                        }, function(ret, err) {
                                            if (ret) {
                                                console.log(JSON.stringify(ret));
                                                api.toast({
                                                    msg: ret.info,
                                                    duration: 2000,
                                                    location: 'bottom'
                                                });
                                            } else {
                                                alert(JSON.stringify(err));
                                            }
                                        });
                                    }
                                })
                            } else if (ret.buttonIndex == 2) {
                                // alert('支付宝')
                                api.ajax({
                                    url: window.Url.Freestore_serviceRecharge,
                                    method: 'post',
                                    data: {
                                        values: {
                                            token: $api.getStorage('token'),
                                            type: 2
                                        }
                                    }
                                }, function(ret, err) {
                                    if (ret) {
                                        // console.log(JSON.stringify(ret));
                                        if (ret.re == 1) {
                                            var aliPay = api.require('aliPay');
                                            aliPay.payOrder({
                                                orderInfo: ret.data.pay_info
                                            }, function(ret, err) {
                                                switch (ret.code) {
                                                    case '9000':
                                                        api.toast({
                                                            msg: '支付成功',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        window.location.reload()
                                                        break;
                                                    case '4000':
                                                        api.toast({
                                                            msg: '系统异常',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        break;
                                                    case '4001':
                                                        api.toast({
                                                            msg: '数据格式不正确',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        break;
                                                    case '4003':
                                                        api.toast({
                                                            msg: '该用户绑定的支付宝账户被冻结或不允许支付',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        break;
                                                    case '4004':
                                                        api.toast({
                                                            msg: '该用户已解除绑定',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        break;
                                                    case '4005':
                                                        api.toast({
                                                            msg: '绑定失败或没有绑定',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        break;
                                                    case '4006':
                                                        api.toast({
                                                            msg: '订单支付失败',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        break;
                                                    case '4010':
                                                        api.toast({
                                                            msg: '重新绑定账户',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        break;
                                                    case '6000':
                                                        api.toast({
                                                            msg: '支付服务正在进行升级操作',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        break;
                                                    case '6001':
                                                        api.toast({
                                                            msg: '用户中途取消支付操作',
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                        break;
                                                    default:
                                                        api.toast({
                                                            msg: ret.code,
                                                            duration: 2000,
                                                            location: 'middle'
                                                        });
                                                }
                                            });
                                        }else{
                                          api.toast({
                                              msg: ret.info,
                                              duration: 2000,
                                              location: 'bottom'
                                          });

                                        }
                                    } else {
                                        alert(JSON.stringify(err));
                                    }
                                });
                            } else {
                                // alert('weixin')
                                api.ajax({
                                  url: window.Url.Freestore_serviceRecharge,
                                  method: 'post',
                                  data: {
                                      values: {
                                          token: $api.getStorage('token'),
                                          type: 3
                                      }
                                  }
                                },function(ret, err){
                                    if (ret) {
                                        console.log(JSON.stringify( ret ) );
                                        if(ret.re==1){
                                          var weiXin = api.require('weiXin');
                                          weiXin.payOrder({
                                              orderId: ret.data.pay_info.prepayid,
                                              partnerId: ret.data.pay_info.partnerid,
                                              nonceStr: ret.data.pay_info.noncestr,
                                              timeStamp: ret.data.pay_info.timestamp,
                                              package: ret.data.pay_info.package,
                                              sign: ret.data.pay_info.sign
                                          }, function(re, er) {
                                            // console.log(re)
                                            // console.log(er)
                                              if (re.status) {
                                                api.toast({
                                                    msg: '支付成功',
                                                    duration: 2000,
                                                    location: 'bottom'
                                                });
                                              }
                                          })
                                        }else{
                                          api.toast({
                                              msg: ret.info,
                                              duration: 2000,
                                              location: 'bottom'
                                          });

                                        }
                                    } else {
                                        alert( JSON.stringify( err ) );
                                    }
                                });

                            }

                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                },
                //刷新
                setRefresh() {
                    var pullRefresh = new auiPullToRefresh({
                        container: document.querySelector('.aui-refresh-content'),
                        triggerDistance: 100
                    }, function(ret) {

                        if (ret.status == "success") {
                            setTimeout(function() {
                                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                            }, 1500)
                        }
                    })
                },
                goback() {
                    api.closeWin();
                }
            },
            mounted() {
                this.setRefresh();
                this.getDataInfo();
            }
        })
    };
</script>

</html>
